using(['utils/helpers',
    'admin/js/mod/system/Role',
    'admin/js/mod/system/Config',
    'admin/js/mod/system/Nav',
    'admin/js/mod/system/Cat',
    'admin/js/mod/system/Level',
    'admin/js/mod/user/List',
    'admin/js/mod/user/ListCredit',
    'admin/js/mod/user/ListCreditLog',
    'admin/js/mod/posts/List'
], (helpers,
    Role,
    Config,
    Nav,
    Cat,
    Level,
    UserList,
    UserListCredit,
    UserListCreditLog,
    PostsList
) => {

const router = new VueRouter({
    mode: 'hash',
    routes: [
        {
            path: '/',
            component: {
                template: `<el-alert
                    title="后台管理系统"
                    type="info"
                    show-icon>
                </el-alert>`
            }
            // props: {}
        }, {
            path: '/system/config',
            component: Config
        }, {
            path: '/system/nav',
            component: Nav
        }, {
            path: '/system/category',
            component: Cat
        }, {
            path: '/system/role',
            component: Role
            // props: {}
        }, {
            path: '/system/level',
            component: Level
        }, {
            path: '/user/list',
            component: UserList
        }, {
            path: '/user/listusercredit',
            component: UserListCredit
        }, {
            path: '/user/listusercreditlog',
            component: UserListCreditLog
        }, {
            path: '/posts/list',
            component: PostsList
        }
    ]
});

new Vue({
    router: router,
    data: function() {
        return {
            avatar: ''
        };
    },
    methods: {
        handleDropDownCommand: function(com) {
            if('quit' === com) {
                window.location.href = '/logout';
            }
        }
    },
    mounted: function() {
        var _self = this;
        var sdk = window.USER_SDK.getInstance();

        if(!sdk.isLogin()) {
            window.location.href = '/';
            return;
        }

        sdk.getUserInfo(function(rs){
            _self.avatar = helpers.getAvatar(rs.avatar);
        });
    },
    template:
`<div data-role="app" style="height: 100%">
    <el-container>
        <el-header style="position:fixed; z-index:10; width:100%; height:50px; line-height:50px; top:0; left:0; background-color:#262626">
            <span style="color: #fff">后台管理</span>
            <el-dropdown style="float:right; color:#fff" @command="handleDropDownCommand">
                <span class="el-dropdown-link">
                    <el-avatar :size="32" :src="avatar" style="vertical-align:middle"></el-avatar>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="quit">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <el-aside style="position:fixed; width:220px; top:50px; bottom:0; left:0; background-color:#444; overflow-y:auto">
                <el-menu router :default-active="$route.path" background-color="#444" text-color="#ddd" active-text-color="#fff">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-menu"></i>系统管理</template>
                        <el-menu-item index="/system/config">配置管理</el-menu-item>
                        <el-menu-item index="/system/nav">导航管理</el-menu-item>
                        <el-menu-item index="/system/category">分类管理</el-menu-item>
                        <el-menu-item index="/system/role">角色管理</el-menu-item>
                        <el-menu-item index="/system/level">等级管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>用户管理</template>
                        <el-menu-item index="/user/list">用户列表</el-menu-item>
                        <el-menu-item index="/user/listusercredit">用户财富</el-menu-item>
                        <el-menu-item index="/user/listusercreditlog">财富日志</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-menu"></i>文章管理</template>
                        <el-menu-item index="/posts/list">文章列表</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main style="position:absolute; top:50px; left:220px; right:0;">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</div>`
}).$mount('#app');

});
